<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery.datagrid</title>
<link rel="stylesheet" type="text/css" href="../themes/default/linkbutton.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/combobox.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/pagination.css" />
<link rel="stylesheet" type="text/css" href="../themes/default/datagrid.css" />
<link rel="stylesheet" type="text/css" href="../themes/icon.css" />
<script type="text/javascript" src="../jquery-1.10.2.js">
</script>
<script type="text/javascript" src="../jquery.json-2.4.js">
</script>
<script type="text/javascript" src="../src/jquery.parser.js">
</script>
<script type="text/javascript" src="../src/jquery.linkbutton.js">
</script>
<script type="text/javascript" src="../src/jquery.tooltip.js">
</script>
<script type="text/javascript" src="../src/jquery.validatebox.js">
</script>
<script type="text/javascript" src="../src/jquery.select2.js">
</script>
<script type="text/javascript" src="../src/jquery.combobox.js">
</script>
<script type="text/javascript" src="../src/jquery.pagination.js">
</script>
<script type="text/javascript" src="../src/jquery.datagrid.js">
</script>
<script type="text/javascript" src="../demo/datagrid_data.json">
</script>
</head>
<body>
<div>

<div id="dd" class="datagrid" style="min-width: 400px; max-width: 1000px;">
	<div class="datagrid-header">
    	标题
	</div>
	<div class="datagrid-body">
		<div class="datagrid-toolbar">
			<a class="l-btn l-btn-plain" href="javascript:void(0)"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">Add</span><span class="l-btn-icon icon-add">&nbsp;</span></span></a>
			<a class="l-btn l-btn-plain" href="javascript:void(0)"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">Add</span><span class="l-btn-icon icon-add">&nbsp;</span></span></a>
		</div>
		<div class="datagrid-view">
			<table class="datagrid-table" border="0" cellspacing="0" cellpadding="0">
			    <thead>
			      <tr class="datagrid-header-row">
			      	<th rowspan="2" class="datagrid-header-rownumber" data-options="field:'rn',rownumber:true"></th>
			        <th rowspan="2" class="datagrid-td-check" data-options="field:'chk',checkbox:true"><div class="datagrid-header-check"><input type="checkbox"></div></th>
			        <th colspan="2">大标题</th>
			        <th rowspan="2" data-options="field:'text3'">标题3</th>
			      </tr>
			      <tr class="datagrid-header-row">
			        <th data-options="field:'text1',width:200">标题1</th>
			        <th data-options="field:'text2',width:200">标题2</th>
			      </tr>
			    </thead>
			    <tbody>
			    </tbody>
		  </table>
		</div>
		<div class="datagrid-pager">
		</div>
	</div>
</div>

<button onclick="acceptChanges()">acceptChanges</button>
<div id="dd2" class="datagrid" style="min-width: 800px;">
	<div class="datagrid-header">
    	标题
	</div>
	<div class="datagrid-body">
		<div class="datagrid-toolbar">
			<a class="l-btn l-btn-plain" href="javascript:void(0)"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">Add</span><span class="l-btn-icon icon-add">&nbsp;</span></span></a>
			<a class="l-btn l-btn-plain" href="javascript:void(0)"><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">Add</span><span class="l-btn-icon icon-add">&nbsp;</span></span></a>
		</div>
		<div class="datagrid-view">
		  <table class="datagrid-table" border="0" cellspacing="0" cellpadding="0">
		    <thead>
		      <tr class="datagrid-header-row">
		      	<th class="datagrid-header-rownumber" data-options="field:'rn',rownumber:true"></th>
		        <th class="datagrid-td-check" data-options="field:'chk',checkbox:true"><div class="datagrid-header-check"><input type="checkbox"></div></th>
		        <th data-options="field:'text1',width:200,formatter:formatInput">标题1</th>
		        <th data-options="field:'text2',width:200">标题2</th>
		        <th data-options="field:'text3',formatter:formatCheck">标题3</th>
		      </tr>
		    </thead>
		    <tbody>
		      
		    </tbody>
		  </table>
		</div>
		<div class="datagrid-pager">
		</div>
	</div>
</div>

<br>


<div id="toolbar">
	<a href="javascript:void(0)" class="xui-linkbutton" data-options="initDom:true,iconCls:'icon-add'" onclick="onClickAdd3(this)">测试</a>
</div>
<table id="dd3" class="xui-datagrid" title="测试" data-options="initDom:true,pagination:true,toolbar:'#toolbar',onLoadSuccess:onLoadSuccess"  border="0" cellspacing="0" cellpadding="0" style="width:600px; height:200px;">
<thead>
  <tr>
  	<th data-options="field:'rn',rownumber:true"></th>
    <th data-options="field:'chk',checkbox:true"></th>
    <th data-options="field:'text1',width:200,formatter:formatInput2">标题1+标题2</th>
    <th data-options="field:'text3',formatter:formatCheck">标题3</th>
    <th data-options="field:'text4',formatter:formatSelect">标题3</th>
    <th data-options="field:'text5',formatter:formatCombobox">标题3</th>
  </tr>
</thead>
<tbody>
</tbody>
</table>
		  
</div>
<script>
	
var comboboxData = [{
	value:"1",text:"1"
},{
	value:"2",text:"2"
}, {
	value:"3",text:"3"
},{
	value:"4",text:"4"
}];	

function formatInput(value) {
	return '<input type="text" value="'+value+'" />';
}

function formatInput2(value, row, index) {
	var s = '<input type="text" field="text1" value="'+row['text1']+'" />';
	s += '<input type="text" field="text2" value="'+row['text2']+'" />';
	return s;
}

function formatSelect(value, row, index) {
	var s = '<select class="xui-select2" field="text4" data-value="'+value+'"></select>';
	return s;
}

function formatCombobox(value, row, index) {
	var s = '<input type="text" class="xui-combobox" field="text5" data-value="'+value+'">';
	return s;
}

function formatCheck() {
	return '<input type="checkbox" data-options="on:\'1\',off:\'2\'" />';
}

function onLoadSuccess() {
	$('.xui-select2[field="text4"]', this).select2({
		data: comboboxData
	}).each(function(i, elem) {
		$(elem).val($(elem).attr('data-value'));
	});
	
	$('.xui-combobox[field="text5"]', this).combobox({
		initDom: true,
		data: comboboxData
	}).each(function(i, elem) {
		$(elem).combobox('setValue', $(elem).attr('data-value'));
	});
}

function acceptChanges() {
	console.log($('#dd2').datagrid('acceptChanges').datagrid('getData'));
	console.log($('#dd3').datagrid('acceptChanges').datagrid('getData'));
}

function onClickAdd3() {
	$('#dd3').datagrid('insertRow', {
		row: {}
	});
	$('#dd3').datagrid('appendRow', {});
}

$(function() {
	$('.xui-linkbutton').linkbutton();
	$('#dd,#dd2,.xui-datagrid').datagrid({
		data: datagrid_data
	});
});

</script>
</body>
</html>